<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href='https://www.hanyi.studio/WebFonts/C3DB971E-443B-4D37-887D-530EE441EB6B/201712/css/618CD03BA931BC55.css' rel='stylesheet' type='text/css' />
    <link href='https://www.hanyi.studio/WebFonts/C3DB971E-443B-4D37-887D-530EE441EB6B/201712/css/EA1124234EE9F3A9.css' rel='stylesheet' type='text/css' />
    <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    html {
        height: 100%;
    }
    
    * {
        margin: 0;
        padding: 0;
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Chrome/Safari/Opera */
        -khtml-user-select: none;
        /* Konqueror */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently*/
    }
    
    body {
        height: 100%;
        overflow: hidden;
    }
    
    video {
        position: relative;
        z-index: -2;
        top: 0;
        left: 0;
    }
    
    .lodding span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        text-align: center;
    }
    
    #loding_div {
        width: 100%;
        height: 100%;
        /* display: none; */
        z-index: 10;
        position: absolute;
        top: 0;
        left: 0;
        background: rgb(0, 37, 18);
    }
    
    .pagecount {
        width: 100%;
        height: 100%;
        position: absolute;
    }
    
    .pagetext {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .text {
        width: 100%;
        height: 100%;
    }
    
    .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        /* z-index: -1; */
        background: url("./img/video_mask.png");
    }
    
    .weltext {
        position: absolute;
        top: 0%;
        left: 0%;
        /* margin: 5px 5px; */
        /* transform: scale(0.8); */
        z-index: 9;
        color: white;
        font-size: 28px;
        text-align: center;
        animation: page1logo 5s ease-in-out;
    }
    
    .weltext span {
        /* line-height: 36px; */
        display: block;
        width: 100%;
        height: 40px;
    }
    
    @keyframes page1logo {
        0% {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 50px;
        }
        90% {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 50px;
        }
        100% {
            top: 0%;
            left: 0%;
            /* margin: 5px 5px; */
            font-size: 28px;
        }
    }
    
    .weltext1 {
        width: 40%;
        position: absolute;
        top: 50%;
        left: 50%;
        display: none;
        transform: translate(-50%, -50%);
        z-index: 9;
        color: rgba(255, 255, 255, 1);
        font-size: 60px;
        text-align: center;
        transition: all 2s;
        letter-spacing: 8px;
    }
    
    .weltext1::before,
    .weltext1::after {
        content: " ";
        position: absolute;
        width: 0;
        height: 0;
        bottom: 0;
        border-top: 2px solid orange;
        -webkit-transition: width 0.5s ease-out 0s;
        -moz-transition: width 0.5s ease-out 0s;
        transition: width 0.5s ease-out 0s;
    }
    
    .weltext1::before {
        right: 50%;
    }
    
    .weltext1::after {
        left: 50%;
    }
    
    .weltext2::before,
    .weltext2::after {
        width: 50%;
        -webkit-transition: width 0.5s ease-out 0.5s;
        -moz-transition: width 0.5s ease-out 0.5s;
        transition: width 0.5s ease-out 0.5s;
    }
    
    #audio_btn_text {
        display: inline-block;
        width: 45px;
        position: absolute;
        color: rgb(255, 255, 255);
        font-size: 12px;
        line-height: 15px;
        left: 0px;
        top: 0;
    }
    
    #audio_btn_left {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        position: absolute;
        left: 50px;
        background: #ccc;
        display: inline-block;
    }
    
    #audio_btn_right {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        position: absolute;
        left: 80px;
        top: 0;
        background: #ccc;
        display: inline-block;
    }
    
    #audio_btn_center {
        width: 30px;
        height: 16px;
        position: absolute;
        background: #ccc;
        display: inline-block;
        left: 58px;
        top: 0;
    }
    
    #audio_btn_change {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        position: absolute;
        background: rgb(0, 17, 48);
        margin: 2px 0px;
        left: 55px;
        top: 0;
        transition: all 0.1s;
    }
    
    #audio_btn_state {
        position: absolute;
        color: rgb(0, 17, 48);
        font-size: 12px;
        line-height: 16px;
        top: 0px;
        left: 69px;
    }
    
    #audio_btn {
        position: fixed;
        top: 95%;
        left: 90%;
        cursor: pointer;
    }
</style>
<script type="text/javascript">
    var nowPage = 0;
    $(document).ready(function() {
        //得到鼠标滚轮的事件处理  
        $(document).mousewheel(function(event, delta) {
            if (!$('.pagecount').is(':animated')) {
                console.log(delta); //滚轮往上滚delta=1，往下滚delta=-1  
                //问题？  
                //鼠标向上滚delta=1，是数值增大的过程，而用户的习惯是序号减小的过程  
                //鼠标向下滚delta=-1，是数值减小的过程，而用户的习惯是序号增大的过程  
                //解决：相反数  
                if (delta > 0) {
                    nowPage--;
                } else {
                    nowPage++;
                }
                if (nowPage < 0) {
                    nowPage = 0;
                }
                if (nowPage > 2) {
                    nowPage = 2;
                }
                console.log(nowPage);
                // $("h1").html(nowPage);
                // document.getElementsByClassName("all")[0].style.top = -nowPage * 100 + "%";
                if (nowPage == 1) {
                    document.getElementsByClassName('weltext1')[0].className = "weltext1";
                } else {
                    document.getElementsByClassName('weltext1')[0].className = "weltext1 weltext2";
                }
                $('.pagecount').stop(true).animate({
                    top: -nowPage * 100 + '%'
                }, 1000, 'easeInOutQuart');
                // $('.nav li').eq(nowPage).addClass('current').siblings().removeClass('current');

            }
        });
    });
    setTimeout(function() {
        lock = true;
    }, 500);
</script>
<script>
    window.onload = function show() {
        document.getElementById("loding_div").style.display = "none";
        document.getElementById("audio").volume = "0";
        //动态获取窗口大小
        var winWidth = 0;
        var winHeight = 0;

        function findDimensions() //函数：获取尺寸
        {
            //获取窗口宽度
            if (window.innerWidth)
                winWidth = window.innerWidth;
            else if ((document.body) && (document.body.clientWidth))
                winWidth = document.body.clientWidth;
            //获取窗口高度
            if (window.innerHeight)
                winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                winHeight = document.body.clientHeight;
            //通过深入Document内部对body进行检测，获取窗口大小
            if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
                winHeight = document.documentElement.clientHeight;
                winWidth = document.documentElement.clientWidth;
            }
            //结果输出至两个文本框
            var number = winWidth / winHeight;
            // alert(winWidth+"-"+winHeight);
            var video = document.getElementsByTagName("video");
            for (var i = 0; i < video.length; i++) {
                if (number <= 1.77) {

                    video[i].style.width = "auto";
                    video[i].style.height = winHeight + "px";
                } else {
                    video[i].style.width = winWidth + "px";
                    video[i].style.height = "auto";
                }
            }

        }
        findDimensions();
        //调用函数，获取数值
        window.onresize = findDimensions;
        // alert("123");
    }

    function show_welcome() {
        var weltext1 = document.getElementsByClassName('weltext1')[0];
        weltext1.style.display = "block";
        clearInterval(tp);

    }
    var tp = setInterval("show_welcome()", 4800);

    function audio_btn() {
        var audio_value = document.getElementById("audio");
        var audio_change = document.getElementById("audio_btn_change");
        var audio_state = document.getElementById("audio_btn_state");
        if (audio.volume == 0) {
            audio.volume = 0.2;
            audio_change.style.left = "55px";
            audio_state.style.left = "69px";
            audio_state.innerHTML = "NO";
        } else {
            audio.volume = 0;
            audio_change.style.left = "79px";
            audio_state.style.left = "55px";
            audio_state.innerHTML = "OFF";
        }
        
    }
</script>

<body>
    <div class="all">
        <div id="loding_div">
            <div class="lodding">
                <span>
                    <img src="spinning-circles.svg" width="50px">
                    <br/>
                </span>
            </div>
        </div>
        <div class="pagecount">
            <div id="page1" class="pagetext">
                <video autoplay muted loop>
                    <source src="./img/page1.mp4" type="video/mp4">
                    </souece>
                </video>
                <div class="text">
                    <div class="css618CD03BA931BC55">
                        <div class="weltext">
                            <p>潮人摄区</p>
                            <p>Trendsetter</p>
                        </div>
                        <div class="cssEA1124234EE9F3A9">
                            <div class="weltext1 weltext2">
                                <p>汇聚全球摄影作品</p>
                            </div>
                        </div>
                    </div>
                    <div class="mask">
                    </div>
                </div>
            </div>
            <div id="page2" class="pagetext">
                <video autoplay muted loop>
                    <source src="./img/page1.mp4" type="video/mp4">
                    </souece>
                </video>
                <div class="text">
                    <div class="mask">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>